<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子类选择器</title>
</head>
<style>
  strong {   /**元素选择器**/
    color: red;
  }
  h2 strong {  /**类型选择器+后代选择器**/
    color: blue;
  }
  h2.h2p p {  /**类选择器+类型选择器**/
    color: green;  
  }
  ul > li[class="demo5"] > strong {
    border: 2px solid black;
    color: blue;
  }
  </style>
<body>
  <p>The strongly emphasized word in this paragraph is <strong>red</strong>.</p>
<h2 class="h2p">This subhead is also <p>red.</p></h2>
<!--只有下面这一行会受到影响h2 里面的 stong-->
<h2>The strongly emphasized word in this subhead is <strong>blue</strong>.</h2>

<!-- 只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。 -->
<ul>
  <li class=demo5><strong>无序</strong></li>
  <li>无序2</li>
  <li>无序3</li>
</ul>


<!-- 后代选择器 与 子代关系选择器 -->
<style>
  ul em {
    color: red;
  }
  ul > li > em {
    color: yellowgreen;
  }
</style>
<ul>
  <!-- 嵌套1 -->
  <li>List <em>item 1</em></li> 
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li> 
          <!-- 嵌套2 -->
          <li>List item <em>1-3-2</em></li> 
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <!-- 嵌套3 -->
      <li>List item <em>1-4</em></li> 
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<style>
  table.company td > p {color:red;}
  </style>
  <table class="company" border="2px">
      <tr>
        <th>table item 1-1</th>
        <td>table <p>item</p> 1-2</td>
        <th>table item 1-3</th>
        <th>table item 1-3</th>
      </tr>
      <tr>
        <td>This TD anD ,<p>P element!!</p><td>
        <td>This TD anD ,<p>P element!!</p><td>
        <td>This TD anD ,<p>P element!!</p><td>
      </tr>
  </table>
</body>
</html>